import React, { Component } from 'react'
import { NavLink, withRouter } from 'react-router-dom'
import RouterView from "../router/router"
import { getCartList, getCartNumber } from '../request/cart_request'
import rules from "../router/rules"

class Layout extends Component {
    state = {
        cartlist: []
    }
    UNSAFE_componentWillMount() {
        this.setCartList()
    }
    setCartList() {
        getCartList().then(cartlist => {
            if (cartlist) {
                this.setState({
                    cartlist
                })
            } else {
                this.setState({
                    cartlist: []
                })
            }

        })
    }
    render() {
        const { cartlist } = this.state
        return (
            <>
                <RouterView routes={rules} restCarList={this.setCartList.bind(this)} CartList={cartlist}></RouterView>
                {
                    this.props.location.pathname !== "/goods_detail/" ? <div className="tabbar">
                        <NavLink activeClassName="router-link-active" className="icon icon-home" to="/index">
                            商城
                        </NavLink>
                        <NavLink activeClassName="router-link-active" className="icon icon-cate" to="/cate">
                            分类
                        </NavLink>
                        <NavLink activeClassName="router-link-active" className="icon icon-cart" to="/cart">
                            {
                                getCartNumber(cartlist) !==0?<span className="badge">{getCartNumber(cartlist)}</span>:""
                            }
                            购物车
                        </NavLink>
                        <NavLink activeClassName="router-link-active" className="icon icon-user" to="/unceter">
                            我的
                        </NavLink>
                    </div> : ""
                }
            </>
        )
    }
}

export default withRouter(Layout)